<template>
  <!-- 查
        1：定义api
        2:导入api
        3:进入页面请求api获取数据
        4：存储并渲染
        5：与分页建立关联
            a:将请求的api参数与页面分页器参数要对应上
            b:页码与页容量改变都要双向绑定
            c:页码改变与页容量改变都要重新请求api
            d:总条数要与分页器对应上

      增
        1：创建新增弹框组件
        2：在父组件导入注册使用
        3：点击新增打开弹框
        4：完成布局
        5：完成表单验证
        6：定义新增api
        7:导入新增api
        8:点击确定在表单验证通过后调用api
        9:调用成功
            a:关闭弹框
            b:清空表单数据与验证
            c:刷新父级列表数据
            d:提示

      删
       1：点击删除弹出确定框
       2：定义删除api
       3:导入删除api
       4:确定框点击了确定调用删除api
       5:调用成功
           提示
           刷新列表数据
              有分页：
                  如果页码>1  && 当前页数据.length===1
                  页码--
                  刷新列表数据
                  或： 页码=1

      导入路由跳转
        1：创建路由所对应组件
        2：配制路由
        3：实现跳转

    excel导出
     1：拷贝文件进入src
     2:安装 file-saver
     3:导入 插件方法
     4:点击时调用导出方法并传参
     5:传参参数处理
         获取所有的员工列表数据
         转换成相应格式

     员工查看页面创建
     1：创建页面所对应组件
     2：配制路由
     3：点击查看跳转到员工查看页面
         跳转时有路由传值（员工的id）
            query
               传：this.$router.push('/xxx?参数名=值')
               收：this.$route.query.参数名

            params(动态路由匹配)
               配制路由：
                  {
                    path:'/xxx/:id'
                  }
                传：this.$router.push('/xxx/123')
                收:this.$route.params.id

    头像生成二维码
    1：创建弹框
    2：点击头像打开弹框
    3：生成二维码
        下载插件
        导入插件
        弹框内创建canvas
        打开弹框同时生成二维码

    员工分配角色
     1：创建一个分配角色的弹框组件
     2：在父组件使用角色弹框组件
     3：点击分配角色打开弹框
     4：完成角色列表显示（公司设置列表，使用多选框）
     5：角色的默认勾选
     6：定义修改api
     7:导入修改api
     8:点击确定时调用修改api
     9:修改成功
        关闭弹框
        清空勾选数据
        提示
 -->

  <div class="employees">
    <el-card class="top-card">
      <div class="top">
        <div class="left">
          <i class="el-icon-info" />
          <span>共{{ total }}条记录</span>
        </div>
        <div class="right">
          <el-button
            type="danger"
            size="small"
            @click="exportExcel"
          >普通excel导出</el-button>
          <el-button type="info" size="small">复杂表头excel导出</el-button>
          <el-button
            type="success"
            size="small"
            @click="$router.push('/employees/import')"
          >excel导入</el-button>
          <el-button
            type="primary"
            size="small"
            @click="addEvent"
          >新增员工</el-button>
        </div>
      </div>
    </el-card>
    <el-card>
      <el-table :data="list">
        <el-table-column label="序号">
          <template v-slot="{ $index }">
            <div>
              {{ (page.page - 1) * page.size + $index + 1 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="姓名" />
        <el-table-column prop="staffPhoto" label="头像">
          <template v-slot="{ row }">
            <img
              v-errorimg
              :src="row.staffPhoto"
              class="img"
              alt=""
              @click="imgClick(row.staffPhoto)"
            >
          </template>
        </el-table-column>
        <el-table-column prop="mobile" label="手机号" width="120px" />
        <el-table-column prop="workNumber" label="工号" />
        <el-table-column
          prop="formOfEmployment"
          label="聘用形式"
          :formatter="formatterFormOf"
        />
        <el-table-column prop="departmentName" label="部门" />
        <el-table-column prop="timeOfEntry" label="入职时间">
          <template v-slot="{ row }">
            <div v-time="row.timeOfEntry" />
          </template>
        </el-table-column>
        <el-table-column
          prop="enableState"
          label="状态"
          :formatter="formatterState"
        />
        <el-table-column label="操作" width="300px">
          <template v-slot="{ row }">
            <div>
              <el-button type="text" @click="lookEvent(row.id)">查看</el-button>
              <el-button type="text">转正</el-button>
              <el-button type="text">调岗</el-button>
              <el-button type="text">离职</el-button>
              <el-button type="text" @click="roleEvent(row)">角色</el-button>
              <el-button type="text" @click="delEvent(row.id)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          :current-page.sync="page.page"
          :page-sizes="[1, 5, 10, 20, 30, 50, 100]"
          :page-size.sync="page.size"
          :total="total"
          layout="total,prev,pager,next,sizes"
          @current-change="currentChange"
          @size-change="sizeChange"
        />
      </div>
    </el-card>
    <!-- 新增弹框组件 -->
    <Add ref="add" @getData="getData" />
    <!-- 二维码弹框 -->
    <!-- <CodeDialog :value="showDialog" @input="showDialog = $event" /> -->
    <CodeDialog ref="codeDialog" v-model="showDialog" />
    <!-- 分配角色弹框 -->
    <SetRole ref="role" />
  </div>
</template>
<script>
// 页容量持久化   1：值改变了就存储到浏览器  2：初始值读取浏览器存储
import { sysUser, sysUserDelete } from '@/api/employees'
import jsCookie from 'js-cookie'
// 导入枚举数据
import employeesData from '@/api/constant/employees'
import Add from './components/add.vue'
import SetRole from './components/setRole.vue'
// moment:时间转换
// 1：下载  yarn add moment
// 2:导入  import moment from 'moment'
// 3:使用  moment(时间数据).format('YYYY-MM-DD')
import moment from 'moment'
import { export_json_to_excel } from '@/vendor/Export2Excel'
import CodeDialog from './components/codeDialog.vue'
export default {
  components: {
    Add,
    CodeDialog,
    SetRole
  },
  data() {
    return {
      showDialog: false,
      list: [],
      total: 100,
      page: {
        page: 1, //	是	1	页码
        size: +jsCookie.get('employees-size') || 5 //	是	10	每页条数
      }
    }
  },
  async created() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await sysUser(this.page)
      this.list = res.data.rows
      this.total = res.data.total
      console.log(res)
    },
    // 页码改变
    currentChange() {
      this.getData()
    },
    // 页容量改变
    sizeChange(size) {
      jsCookie.set('employees-size', size)
      this.getData()
    },
    // 聘用形式数据转换
    formatterFormOf(row, column, cellValue, index) {
      // row:当前行数据
      // column:el-table-column组件内的数据
      // cellValue：当前项的数据
      // index:下标
      // 需求：  1：正式   2：非正式    -
      // 男  0   女  1   保密
      // const obj = { 1: '正式', 2: '非正式' }
      // return obj[cellValue] ? obj[cellValue] : '-'
      // employeesData.hireType
      // cellValue:1
      // find:找出相应的项，拿到相应项的值，找不到undefined
      const findItem = employeesData.hireType.find(
        (item) => item.id === +cellValue
      )
      return findItem ? findItem.value : '-'
    },
    // 状态转换
    formatterState(row, column, cellValue) {
      const findItem = employeesData.workingState.find(
        (item) => +item.id === cellValue
      )
      return findItem ? findItem.value : '-'
    },
    // 时间转换
    formatterTime(row, column, cellValue) {
      return moment(cellValue).format('YYYY-MM-DD')
    },
    // 新增点击事件
    addEvent() {
      // 打开弹框
      this.$refs.add.isShow = true
    },
    // 删除点击事件
    delEvent(id) {
      this.$confirm('您确定删除该项吗?')
        .then(async() => {
          await sysUserDelete(id)
          this.$message.success('删除成功')
          if (this.page.page > 1 && this.list.length === 1) {
            this.page.page--
          }
          this.getData()
        })
        .catch(() => {})
    },
    // 导出excel点击事件
    async exportExcel() {
      // 获取所有员工数据
      const res = await sysUser({
        page: 1, //	是	1	页码
        size: 99999
      })
      // console.log('所有员工数据', res.data.rows)
      // data=[[姓名的值,头像的值....]]
      // 数据转换成excel导出的格式
      const newArr = res.data.rows.map((item) => {
        return [
          item.username,
          item.staffPhoto,
          item.mobile,
          item.workNumber,
          this.formatterFormOf(null, null, item.formOfEmployment),
          item.departmentName,
          this.formatterTime(null, null, item.timeOfEntry),
          this.formatterState(null, null, item.enableState)
        ]
      })
      // 导出excel
      export_json_to_excel({
        header: [
          '姓名',
          '头像',
          '手机号',
          '工号',
          '聘用形式',
          '部门',
          '入职时间',
          '状态'
        ],
        data: newArr,
        filename: '员工列表'
      })
    },
    // 查看点击事件
    lookEvent(id) {
      this.$router.push('/employees/details/' + id)
    },
    // 点击头像打开弹框
    imgClick(src) {
      if (src) {
        // 点击头像打开弹框
        this.showDialog = true
        // 等到前面的数据渲染完成后执行
        this.$nextTick(() => {
          // 调用子组件的方法
          this.$refs.codeDialog.createCode(src)
        })
      } else {
        this.$message.error('图片不存在')
      }
    },
    // 角色点击
    roleEvent(row) {
      this.$refs.role.isShow = true
      // 调用弹框组件方法获取角色列表
      this.$refs.role.getData()
      this.$refs.role.getRole(row.id)

      console.log(row)
    }
  }
}
</script>
<style lang="scss" scoped>
.employees {
  padding: 20px;
  .top-card {
    margin-bottom: 20px;
  }
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      border: 1px solid #91d5ff;
      background-color: #e6f7ff;
      padding: 6px;
      i {
        color: #409eff;
        padding-right: 6px;
      }
    }
  }
  .page {
    padding: 15px 0;
    text-align: right;
  }
  .img {
    width: 50px;
    height: 50px;
    object-fit: contain;
  }
}
</style>
